  <div class="row animate fadeIn">
    <form id="add_users_form" class="form-horizontal"  method="post">
        <div class="ibox-title" style="border:none;"><h5 style="color: #00afef"><i>Add Users</i></h5>
            <div class="ibox-tools">    
                <button  id="sads" class="btn btn-sm btn-primary save-btn-tab">Save</button>
                <a id = "cancel_add" class="btn btn-sm btn-outline btn-info cancel-btn-tab">Cancel</a>
            </div>
        </div>
        <div class="ibox-content">
         
          <div class="form-group">
              <label class="col-lg-4 control-label" id="username"><b>User Name</b></label>
            <div class="col-lg-5">
              <input type="text" name="user_name" class="form-control">
            </div>
          </div>
          <div class="form-group" id="fname">
              <label class="col-lg-4 control-label"><b>First Name</b></label>
            <div class="col-lg-5">
              <input type="text" name="f_name" class="form-control">
            </div>
          </div>
          <div class="form-group" id="lname">
              <label class="col-lg-4 control-label"><b>Last Name</b></label>
            <div class="col-lg-5">
              <input type="text" name="l_name" class="form-control">
            </div>
          </div>
          <div class="form-group password">
              <label class="col-lg-4 control-label"><b>Password</b></label>
            <div class="col-lg-5">
              <input type="password" name="passwd" class="form-control" id="passwd">
            </div>
          </div>
          <div class="form-group password">
              <label class="col-lg-4 control-label"><b>Confirm Password</b></label>
            <div class="col-lg-5">
              <input type="password" name="cfmpasswd" class="form-control">
            </div>
          </div>
          <div class="form-group password">
              <label class="col-lg-4 control-label"><b>Email</b></label>
            <div class="col-lg-5">
              <input type="text" name="email" class="form-control">
            </div>
          </div>
          <div class="form-group">
              <label class="col-lg-4 control-label"><b>Company</b></label>
              <div class="col-lg-5">
                <select  id="" class="form-control chosen-select" name="company">
                  <?php foreach ($company as $comp) { ?>
                    <option value="<?php echo $comp->company_id; ?>"><?php echo $comp->company_name; ?></option>
                  <?php } ?>
                </select>
              </div>
          </div>
          <div class="form-group">
            <label class="col-lg-4 control-label">Department</label>
            <div class="col-lg-5">
              <select  id="comp" class="form-control chosen-select" name="department">
                  <option value="">--</option>
                <?php foreach ($department as $dep) { ?>
                  <option value="<?php echo $dep->lookup_code; ?>"><?php echo $dep->meaning; ?></option>
                <?php } ?>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label class="col-lg-4 control-label">Enable</label>
            <div class="col-lg-5">
              <input type="checkbox" value="ok" name="user_ena" id="" class="i-checks" checked>
            </div>
          </div>
        </div>
    </form>
<!--  -->
        <div id="role_access" class="ibox-content">
            <h3 style="color: #00afef">Assign Role Access</h3>
              <form  id="add_role_access" class="">
                <input type="hidden" name="hide_usr_id" id="h_usr_id">
            </br>
              <table id="pgTable"class="table table-bordered" style="width:80%;">
                
                <thead>
                    <tr>
                      <th style="">Role</th>
                      <th style="width:130px;text-align:right;">Start Date</th>
                      <th style="width:130px;text-align:right;">End Date</th>
                      <th style="width:50px;">Enable</th>
                      <th style="width:50px;text-align:center">Action</th>
                    </tr>
                    <tr class="input-daterange" id="datepicker">
                      <td style="margin:0px;padding:0px;">
                          <select id="usr_r" class="chosen-select" name="usr_role">
                                <?php foreach($roles as $role) { ?>
                                    <option value="<?php echo $role->role_id; ?>"> <?php echo $role->role_name; ?> </option>
                                <?php } ?>
                            </select>
                      </td>
                      <td style="margin:0px;padding:0px;">
                                
                          <input style="width:100%;" type="search" id="date_strt" name="usr_start" class="form-control-custom">
                      </td>
                      <td style="margin:0px;padding:0px;">
                          <input style="width:100%;" type="search" id="" name="usr_end" class="form-control-custom">
                      </td>
                      <td style="padding:5px;text-align:center;">
                          <input type="checkbox" value="ok" name="usr_ena" id="" class="i-checks" checked>
                      </td>
                      <td style="margin:0px;padding:0px;">
                          <button style="width:100%;" class="btn btn-white" id=""><i class="fa fa-plus success"></i></button>
                      </td>
                    </tr>    
                </thead>
              </form>
                <tbody id="tbl_roleAdd" class="animate fadeIn">                               
                </tbody>
              </table>
               
        </div>
</div>
<script>
$(document).ready(function () {$('#s-c').remove();
    $('#add_users_form').data('serialize',$('#add_users_form').serialize());
    setDates();
    $(".chosen-select").chosen({width:"100%;"});
    $(".chosen-select").trigger('chosen:updated');
      $('.i-checks').iCheck({
          checkboxClass: 'icheckbox_square-green',
          radioClass: 'iradio_square-green',
      });
      $('#role_access').hide();

      $('.input-daterange').datepicker({
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true,
                format: "yyyy-mm-dd"
      });



    function setDates(){
      var today = new Date();
      $("#date_strt").val(pad(today.getFullYear())+'-'+pad(today.getMonth() + 1)+'-'+pad(today.getDate()));
    }

    function pad(numb) {
          return (numb < 10 ? '0' : '') + numb;
    }

     $.validator.setDefaults({ ignore: ":hidden:not(select)" })
     $('#add_users_form').validate({
      rules :{
        user_name: {
          required : true
        },
        f_name:    {
          required : true
        },
        l_name:    {
          required : true
        },
        passwd:    {
          required : true
        },
        cfmpasswd:    {
          required : true,
          equalTo: "#passwd"
        },
        email: {
          required : true,
          email: true
        },
        company:   {
          required : true
        }
      },submitHandler: function(form){
          dataString = $("#add_users_form").serialize();
          $.ajax({
            type: "POST",
            url: "<?php echo base_url($this->session->userdata('forajax').'/insert_users'); ?>",
            data: dataString,
            dataType: 'json',
          success: function(data){
            if(data[0].error == 1){
                var msgs = data[0].msg;
                var tmp =  msgs.slice(0, 8)
                if(tmp == 'ERR:1062'){
                  notifymsg("danger",'Input below already exist.');
                }else{
                  notifymsg("danger",data[0].msg);
                }
                //notifymsg("danger",data[0].msg);
            }else{
                notifymsg("success",". . .New User Added Successfully");
                mID = data[0].id; console.log(mID);
                $('#h_usr_id').val(mID);
                $('#role_access').show();
                $('#add_users_form').find('input, button').attr('disabled','disabled');
                $('#user_ena').attr('disabled','disabled');$('input').iCheck('update');
                $('#comp').prop('disabled', true).trigger("chosen:updated");
                $('#cancel_add').html('Complete');
                $("#date_strt").datepicker().datepicker("setDate", new Date());
            }
          }      
         });   
        }
      }); 

      $('select[name=user_type]').change(function(){
          if($('select[name=user_type]').val() == 'EXT'){
            $('select[name=entity]').removeAttr('disabled');
            $(".chosen-select").trigger('chosen:updated');
            $('#username').html('Email Addr.');
            $('#fname').hide();
            $('#lname').hide();
            $('.password').hide();
          }else{
            $('select[name=entity]').attr('disabled',true);
            $(".chosen-select").trigger('chosen:updated');
            $('#username').html('User Name');
            $('#fname').show();
            $('#lname').show();
            $('.password').show();
          }
      });

      $('#add_role_access').validate({
        rules : {
          usr_role  : {
            required: true
          }
        },submitHandler: function(form){
          dataString = $("#add_role_access").serialize();
          $.ajax({
            type: "POST",
            url: "<?php echo base_url($this->session->userdata('forajax').'/insert_role_access'); ?>",
            data: dataString,
            dataType: 'json',
          success: function(data){
            if(data[0].error == 1){
                notifymsg("danger",data[0].msg);
            }else{
                notifymsg("success",". . .User Role Added Successfully");
                $('#tbl_roleAdd').empty();
                var trHTML = ''; var cb_ena ="hover";
                $.each(data, function(i, item) {
                  if(data[i].enable_flag == "Y"){
                            cb_ena = "checked";
                    }
                    trHTML += '<tr><td>' + data[i].role_name + '</td><td text-align:right;>' + data[i].start_date + '</td><td text-align:right;>' + data[i].end_date + '</td><td style="padding:5px;text-align:center;"><div style="cursor:default;" class="state icheckbox_square-green '+cb_ena+'"></div></td><td></td></tr>';
                });
                $('#tbl_roleAdd').append(trHTML);
                $("#usr_r option:first").attr('selected','selected').trigger('chosen:updated');
                $('#add_role_access')[0].reset();
                setDates();
            }
          }      
         });   
        }
      });


        function alert_cancel(){
            if($('#add_users_form').serialize()!=$('#add_users_form').data('serialize')){
                swal({
                    title: "Are you sure?",
                    text: "Your work will not be save",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Leave",
                    cancelButtonText: "Stay",
                    closeOnConfirm: true,
                    closeOnCancel: true },
                function (isConfirm) {
                    if (isConfirm) {
                        close_add(); active_search();
                        notifymsg("hide","hide");
                    } else {
                        swal("Cancelled");
                    }
                });
                }else{
                close_add(); active_search();
                notifymsg("hide","hide");
            }
        } 


        $('#cancel_add').click(function () {
          if($('#cancel_add').html() == "Complete"){
            close_add(); active_search();
            notifymsg("hide","hide");
          }else{            
            alert_cancel();
          }
         });
        $('#addX').click(function(){
            alert_cancel();        
       });

});
</script>